<template>
  <div class="calendarWrap">
    <!--月份-->
    <div class="month-box">
      <div class="icon-box" @click="PreMonth(myDate)">
        <div class="pre"></div>
      </div>
      <div class="date-box">
        <datetime format="YYYY-MM" v-model="dateTop" class="month" :end-date="date" @on-confirm="confirm"></datetime>
      </div>
      <div class="icon-box" @click="NextMonth(myDate)">
        <div class="next"></div>
      </div>
    </div>
    <div class="calendar-box">
      <div class="calendar-item" v-for="(item,index) in list" :key="index">
        <!--日历内容-->
        <div class="calendar-item-date" v-if="item.otherMonth =='nowMonth'"
             :class="[setClass(item),{'active': item.passTime}]">
          <div class="small hue">{{item.id}}</div>
          <span class="sign-word" v-if="item.markClassName">签</span>
        </div>
        <div class="calendar-item-date blankMonth" v-if="item.otherMonth =='blankMonth'">
        </div>
        <!--线条-->
        <div class="line-box"
             :class="{'blank':((index+1) % 7 == 0) ? true : false || (index == list.length-1),'line':(item.passTime)}"></div>
        <!--半弧形-->
        <div class="half-arc-right place1" v-if="index == list.length-1"
             :class="{'arc-right-active': (passTime.substring(8,10)<=7 && item.workTime)}"></div>
        <div class="half-arc-right place3" v-if="index == list.length-1"
             :class="{'arc-right-active': (passTime.substring(8,10)<=22  && item.workTime)}"></div>
        <div class="half-arc-left place2 " v-if="index == list.length-1"
             :class="{'arc-left-active': (passTime.substring(8,10)<=14 && item.workTime)}"></div>
        <div v-if="item.otherMonth !='blankMonth'">
          <div class="half-arc-left place4" v-if="index == list.length-1"
               :class="{'arc-left-active': (passTime.substring(8,10)<=28 && item.workTime)}"></div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import timeUtil from "../../config/datetime"
  import {compareDate, formatDate, compareMonth} from "../../config/util"
  import {Datetime} from 'vux'

  export default {
    props: {
      sundayStart: {//默认是周一开始,当是true的时候,是周日开始
        type: Boolean,
        default: () => false
      },
      markDateMore: {
        type: Array,
        default: () => []
      },
      signClass: {
        type: String,
        default: ""
      },
      passTime: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        myDate: [],
        list: [],
        date: "",
        dateTop: ""
      }
    },
    created() {
      this.intStart();
      this.myDate = new Date();
    },
    mounted() {
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      this.getList(this.myDate);
    },
    methods: {
      intStart() {
        timeUtil.sundayStart = this.sundayStart;
      },
      setClass(data) {
        let obj = {};
        obj[data.markClassName] = data.markClassName;
        return obj;
      },
      forMatArgs() {//样式
        let array = new Array();
        for (let i = 0; i < this.markDateMore.length; i++) {
          array.push(timeUtil.dateFormat(this.markDateMore[i]));
        }
        return array;
      },
      getList(date) {//渲染列表
        const markDateMore = this.forMatArgs();
        this.dateTop = `${date.getFullYear()}-${(date.getMonth() + 1 < 10 ? "0" : "") + (date.getMonth() + 1)}`;
        let arr = timeUtil.getMonthListNoOther(this.myDate);
        for (let i = 0; i < arr.length; i++) {
          let markClassName = "";
          let k = arr[i];
          const nowTime = k.date;
          for (const c of markDateMore) {
            if (c === nowTime) {
              markClassName = this.signClass;
            }
          }
          k.markClassName = markClassName;
          k.passTime = compareDate(nowTime, timeUtil.dateFormat(this.passTime));
          k.workTime = compareMonth(this.dateTop, (this.passTime.substr(0, 4) + "-" + this.passTime.substr(5, 2)));
        }
        this.list = arr;
      },
      PreMonth(date) {//上一月
        date = timeUtil.dateFormat(date);
        this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
        this.getList(this.myDate);
        let param = timeUtil.dateFormat(this.myDate).substr(0, 4) + "-" + parseInt(timeUtil.dateFormat(this.myDate).substr(5, 6));
        this.$emit("queryList", param);
      },
      NextMonth(date) {//下一月
        date = timeUtil.dateFormat(date);
        this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
        this.getList(this.myDate);
        let param = timeUtil.dateFormat(this.myDate).substr(0, 4) + "-" + parseInt(timeUtil.dateFormat(this.myDate).substr(5, 6));
        this.$emit("queryList", param);
      },
      ChoseMonth(date) {//选择某月份
        date = timeUtil.dateFormat(date);
        this.myDate = new Date(date);
        this.getList(this.myDate);
      },
      confirm(value) {
        let param = value.substr(0, 4) + "-" + parseInt(value.substr(5, 6));
        this.ChoseMonth(param);
        this.$emit("queryList", param);
      }
    },
    watch: {
      markDateMore: {
        handler(val, oldVal) {
          this.getList(this.myDate);
        }
      },
      sundayStart: {
        handler(val, oldVal) {
          this.intStart();
          this.getList(this.myDate);
        }
      }
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="stylus" scoped>
  .calendarWrap
    margin: 0 auto
    width: 90%
    height: auto
    margin-bottom: 0.667rem
    .month-box
      display: flex
      align-items: center
      justify-content: center
      margin: 0 auto
      margin-bottom: 0.2rem
      width: 94.67%
      height: 1.093rem
      background: rgba(242, 242, 242, 1)
      border-radius: 0.16rem
      .date-box
        margin-left: 0.28rem
        margin-right: 0.28rem
        .month
          font-size: 0.507rem
          color: rgba(60, 175, 255, 1)
      .date-box >>> .vux-cell-value
        font-size: 0.507rem
        color: rgba(60, 175, 255, 1) !important
      .icon-box
        display: flex
        align-items: center
        justify-content: center
        width: 0.533rem
        height: 0.533rem
        border: 1px solid rgba(60, 175, 255, 1)
        border-radius: 50%
        .pre
          width: 0.16rem
          height: 0.16rem
          border-top: 0.027rem solid rgba(60, 175, 255, 1)
          border-left: 0.027rem solid rgba(60, 175, 255, 1)
          transform: rotate(-45deg)
          margin-left: 0.05rem
        .next
          width: 0.16rem
          height: 0.16rem
          border-top: 0.027rem solid rgba(60, 175, 255, 1)
          border-right: 0.027rem solid rgba(60, 175, 255, 1)
          transform: rotate(45deg)
          margin-right: 0.05rem
    .calendar-box
      display: flex
      flex-wrap: wrap
      position: relative
      margin: 0 auto
      width: 100%
      height: 6.16rem
      padding-left: 3.5%
      .calendar-item
        display: flex;
        align-items: center
        justify-content: center
        text-align: center
        width: 14.28%;
        .calendar-item-date
          display: flex
          justify-content: center
          align-items: center
          margin: 0 auto
          @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
            width: 0.85rem
            height: 0.72rem
          }
          @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
            width: 0.85rem
            height: 0.72rem
          }
          @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
            width: 0.85rem
            height: 0.72rem
          }
          @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
            width: 0.85rem
            height: 0.72rem
          }
          @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
            width: 0.72rem
            height: 0.72rem
          }
          @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
            width: 0.72rem
            height: 0.72rem
          }
          width: 0.72rem
          height: 0.72rem
          line-height: 0.72rem
          font-size: 0.506666rem
          border-radius: 50%
          background: rgba(242, 242, 242, 1)
          .small
            display: flex
            justify-content: center
            align-items: center
            width: 0.56rem
            height: 0.56rem
            border-radius: 100%
            background: #FFF
            font-size: 0.36rem
            font-weight: 500
            color: rgba(216, 216, 216, 1)
          .sign-word
            position: absolute
            left: 0
            top: 0
            z-index: 88
            width: 0.72rem
            height: 0.72rem
            line-height :0.72rem
            display: flex
            align-items: center
            justify-content: center
            background: rgba(60, 175, 255, 1)
            border-radius: 50%
            font-size: 0.293rem
            font-weight: 500
            color: rgba(255, 255, 255, 1)
          .hue
            color: rgba(102, 102, 102, 1)
        .sign
          position: relative
          border: 1px solid rgba(60, 175, 255, 1)
          border-radius: 50%
        .active
          background: rgba(216, 239, 255, 1)
        .blankMonth
          background: #FFF
      .line-box
        width: 53.33%
        @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
          width: 59%
        }
        @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
          width: 70%
        }
        height: 0.093rem
        background: rgba(242, 242, 242, 1)
      .line
        background: rgba(216, 239, 255, 1)
      .blank
        background: #FFF
    .half-arc-right
      position: absolute
      width: 0.65rem
      height: 1.16rem
      border: 0.093rem solid rgba(242, 242, 242, 1)
      border-top-right-radius: 0.8rem
      border-bottom-right-radius: 0.8rem
      border-left: none
    .half-arc-left
      position: absolute
      width: 0.65rem
      height: 1.16rem
      border: 0.093rem solid rgba(242, 242, 242, 1)
      border-top-left-radius: 0.8rem
      border-bottom-left-radius: 0.8rem
      border-right: none
    .arc-left-active
      position: absolute
      width: 0.65rem
      height: 1.16rem
      border: 0.093rem solid rgba(216, 239, 255, 1)
      border-top-left-radius: 0.8rem
      border-bottom-left-radius: 0.8rem
      border-right: none
    .arc-right-active
      position: absolute
      width: 0.65rem
      height: 1.16rem
      border: 0.093rem solid rgba(216, 239, 255, 1)
      border-top-right-radius: 0.8rem
      border-bottom-right-radius: 0.8rem
      border-left: none
    .place1
      @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
        right: 0.4rem
      }
      @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
        right: 1rem
      }
      right: -0.1rem
      top: 0.55rem
    .place3
      @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
        right: 0.4rem
      }
      @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
        right: 1rem
      }
      right: -0.1rem
      bottom: 1.8rem
    .place2
      @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
        left: -0.25rem
      }
      @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
        left: -0.1rem
      }
      left: -0.4rem
      top: 1.8rem
    .place4
      @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
        left: -0.25rem
      }
      @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
        left: -0.1rem
      }
      left: -0.4rem
      bottom: 0.55rem
</style>
